<head th:fragment="head">

<!-- Metadata -->
<meta charset="UTF-8">
<title th:text="'S-PDF ' + ${title}"></title>
<link rel="shortcut icon" href="favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- Bootstrap -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.css">

<!-- PDF.js -->
<script src="pdfjs/pdf.min.js"></script>
<link href="pdfjs/pdf_viewer.min.css" rel="stylesheet">

<!-- Custom -->
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">

<script>
		function toggleDarkMode() {
			var checkbox = document.getElementById("toggle-dark-mode");
			var darkModeStyles = document.getElementById("dark-mode-styles");
			if (checkbox.checked) {
				localStorage.setItem("dark-mode", "on");
				darkModeStyles.disabled = false;
			} else {
				localStorage.setItem("dark-mode", "off");
				darkModeStyles.disabled = true;
			}
		}
		$(document).ready(function() {
			var darkModeStyles = document.getElementById("dark-mode-styles");
			var checkbox = document.getElementById("toggle-dark-mode");
			if (localStorage.getItem("dark-mode") == "on") {
				darkModeStyles.disabled = false;
				checkbox.checked = true;
			}
			if (localStorage.getItem("dark-mode") == "off") {
				darkModeStyles.disabled = true;
				checkbox.checked = false;
			}

		});
	</script>
</head>

<th:block th:fragment="filelist">
    <div id="fileList"></div>
    <div id="fileList2"></div>
    <script>
		var input = document.getElementById("fileInput");
		var output = document.getElementById("fileList");

		input.addEventListener("change", function() {
			var files = input.files;
			var fileNames = "";

			for (var i = 0; i < files.length; i++) {
				fileNames += (i + 1) + ". " + files[i].name + "<br>";
			}

			output.innerHTML = fileNames;
		});
	</script>
    <script>
		var input2 = document.getElementById("fileInput2");
		var output2 = document.getElementById("fileList2");
		if (input2 != null && !input2) {
			input2.addEventListener("change", function() {
				var files = input2.files;
				var fileNames = "";

				for (var i = 0; i < files.length; i++) {
					fileNames += (i + 1) + ". " + files[i].name + "<br>";
				}

				output2.innerHTML = fileNames;
			});
		}
	</script>


    <script>
		if (dropContainer) {
			dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
				evt.preventDefault();
			};

			dropContainer.ondrop = function(evt) {
				if (fileInput) {
					fileInput.files = evt.dataTransfer.files;

					const dT = new DataTransfer();
					dT.items.add(evt.dataTransfer.files[0]);
					dT.items.add(evt.dataTransfer.files[3]);
					fileInput.files = dT.files;

					evt.preventDefault();
				}
			};
		}
	</script>
</th:block>

<th:block th:fragment="fileSelector(name, multiple)">
    <div class="custom-file-chooser">
        <div class="custom-file">
            <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:multiple="${multiple}"> 
            <label class="custom-file-label" th:for="${name}+'-input'" th:text="#{pdfPrompt}"></label>
        </div>
    </div>

    <script th:inline="javascript">
		$([[${"#"+name+"-input"}]]).on("change", function() {
			const files = $(this).get(0).files;
			const fileNames = Array.from(files).map(f => f.name).join(", ");
			if (fileNames) {
				$(this).siblings(".custom-file-label").addClass("selected").html(fileNames);
			} else {
				$(this).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
			}
		});
	</script>

    <style>
    .custom-file-label {
    	padding-right: 90px;
    }
    </style>
</th:block>